<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在线考试平台</title>
    <link rel="shortcut icon" href="./images/exam.png" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/font.css"/>
    <link rel="stylesheet" href="./css/xadmin.css"/>
    <link rel="stylesheet" href="./css/userlogin.css"/>

    <style type="text/css">
        body{
            background: url("./images/img.png") no-repeat center center fixed;
            /*兼容浏览器版本*/
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    </style>

</head>
<body>

<!-- 登录表单 -->
<form class="layui-form login-form layui-panel" autocomplete="off">
    <h1 class="login-title"><img style="height: 30px" src="/images/logo.png" alt="logo"> <span>用户登录</span>
    </h1>
    <!-- 用户名 -->
    <div class="layui-form-item"><i class="layui-icon layui-icon-username"></i>
        <input type="text" name="u_sno" placeholder="请输入用户名" class="layui-input" lay-verify="required" 
               lay-reqtext="请输入用户名">
    </div>
    <!-- 密码 -->
    <div class="layui-form-item"><i class="layui-icon layui-icon-password"></i>
        <input type="password" name="u_psw" placeholder="请输入密码" class="layui-input" lay-verify="required"
               lay-reqtext="请输入密码">
    </div>
    <!-- 验证码 -->
    <div class="layui-form-item"><i class="layui-icon layui-icon-vercode"></i>
        <input type="text" name="captcha" placeholder="请输入验证码" class="layui-input" lay-verify="required"
               lay-reqtext="请输入验证码">
        <span class="input-group-btn" title="点击刷新验证码" onclick="updateCaptcha()"
              style="cursor:pointer;">
        <img id="captcha" src="captcha" alt="验证码生成失败！">
        </span>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn layui-btn-normal layui-btn-fluid" id="submit" type="button" lay-submit
                lay-filter="login"> 登录
        </button>
    </div>
</form>

<script type="text/javascript"  src="./lib/layui/layui.js"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
    layui.use(["form", 'jquery', 'layer'], function () {
        const form = layui.form;
        const $ = layui.jquery;
        const layer = layui.layer;

        updateCaptcha()
        //监听提交
        form.on("submit(login)", function (data) {
            $.ajax({
                url: '/login',
                dataType: "json",//数据格式
                type: "post",//请求方式
                async: false,//是否异步请求
                data: {u_sno: data.field.u_sno, u_psw: data.field.u_psw, captcha: data.field.captcha},
                success: function (data) {
                    console.log(data.message);
                    if (data.code===0){
                        layer.msg(data.message,{icon: 5, time:1000})
                    }
                    else if (data.code===200){
                        layer.msg(data.message,{icon: 6, time:1000}, function () {
                            sessionStorage.setItem("userJson", JSON.stringify(data.result));
                            if (data.result.a_authority==='ROLE_ADMIN'){
                                window.location.href = 'exam_system/manage';
                            }else if (data.result.a_authority==='ROLE_TEACHER'){
                                window.location.href = 'exam_system/teacher';
                            }
                            else {
                                window.location.href = 'exam_system/stu';
                            }
                        });
                    }else {
                        layer.msg('系统繁忙',{icon: 5, time:1000})
                    }
                },
                error: function (e) {
                    alert("验证码已失效");
                }
            });
            return false
        });
    });

    //按下回车登录
    $("body").on("keyup", (e) => {
        if (e.which === 13) {
            $("#submit").trigger("click");
        }
    });

    function updateCaptcha() {
        $("#captcha").attr("src", "captcha?" + Math.ceil(Math.random() * 100000));
        $("input[name='captcha']").val('');
    }

</script>
</body>
</html>